<template>
  <div class="page">
    <!--添加活动信息-->
    <div class="context" style="margin-top: 20px; position: relative; padding-bottom: 25px">
      <div class="title_1" style="cursor: pointer" @click.stop="handleShowBaseInfo">
        修改活动
        <i v-if="actCreate.showBaseInfo" class="el-icon-arrow-down"></i>
        <i v-else class="el-icon-arrow-right"></i>
      </div>
      <table class="act_info">
        <tr v-if="actCreate.showBaseInfo">
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动类型</div>
              </div>
              <div class="title_1_ctx1_1">
                <table>
                  <tr>
                    <td>
                      <el-radio-group v-model="actVo.scheme" class="tag_list" disabled>
                        <el-radio class="tag_item" :label="1">沙龙</el-radio>
                        <el-radio class="tag_item" :label="2">客情</el-radio>
                        <el-radio class="tag_item" :label="-1">其他</el-radio>
                      </el-radio-group>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动负责人</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-select v-model="actKeeper" size="small" placeholder="请选择">
                  <el-option
                    v-for="item in actKeepers"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动方案</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-upload
                  action="/"
                  :before-upload="handleFileBeforeUpload"
                  :on-progress="handleFileUploading"
                  :on-success="handleFileUploadOk"
                  :on-error="handleFileUploadError"
                  :http-request="handleFileUpload"
                  :file-list="actFileList"
                  :auto-upload="true"
                  :multiple="false"
                  :disabled="actCreate.proposalUploading"
                  accept=".png,.jpg,.jpeg,.doc,.docx,.xls,.xlsx,.txt,.pdf">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传 pdf/txt/doc/docx/xls/xlsx/jpg/png 文件, 且不超过20M
                  </div>
                </el-upload>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="actCreate.showBaseInfo">
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动预算</div>
              </div>
              <div class="title_1_ctx1_1">
                <el-input-number
                  v-model="actVo.budget"
                  :precision="2"
                  :step="100.0"
                  :max="9999999"
                  :min="0"
                  size="small"></el-input-number>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2" style="width: 100%">
                <div class="title_icon"></div>
                <div class="title_name">活动时间</div>
                <div>
                  <el-radio-group v-model="actType" class="no_flex" style="display: flex; align-items: center" disabled>
                    <el-radio :label="1" style="margin: 0px 5px 0px 5px">固定</el-radio>
                    <el-radio :label="2">时间段</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="title_1_ctx1_1">
                <el-date-picker
                  v-model="actDate"
                  type="date"
                  size="small"
                  placeholder="选择日期"
                  :picker-options="{ disabledDate: actDisabledDate }"></el-date-picker>
                <div v-if="actType == 2" class="act_times">
                  <div style="width: 50%">
                    <el-time-select
                      v-model="actStart"
                      size="mini"
                      clearable
                      style="width: 110px"
                      :picker-options="{
                        start: '09:00',
                        step: '00:15',
                        end: '21:45',
                      }"
                      placeholder="开始时间"></el-time-select>
                  </div>
                  <div style="width: 50%">
                    <el-time-select
                      v-model="actEnd"
                      size="mini"
                      clearable
                      style="width: 110px"
                      :picker-options="{
                        start: '09:15',
                        step: '00:15',
                        end: '22:00',
                      }"
                      placeholder="结束时间"></el-time-select>
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">活动简介</div>
              </div>
              <div class="title_1_ctx1_1" style="width: 100%">
                <el-input
                  v-model="actVo.plan"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入活动方案或简介"></el-input>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">添加顾客</div>
              </div>
              <div class="title_1_ctx2">
                <el-input
                  v-model="clerkSearchTable.searchName"
                  size="mini"
                  clearable
                  style="width: 180px"
                  placeholder="模糊查询顾客姓名"
                  prefix-icon="el-icon-search"></el-input>
                <el-button
                  v-if="clerkSearchTable.dataListLoading"
                  size="mini"
                  type="success"
                  disabled
                  icon="el-icon-loading">
                  搜索顾客
                </el-button>
                <el-button v-else size="mini" type="success" @click.stop="searchClerkByName">搜索顾客</el-button>
              </div>
              <div class="title_1_ctx1_1" style="width: 82vw">
                <!--顾客列表-->
                <el-table
                  ref="refClerkTable"
                  v-loading="clerkSearchTable.dataListLoading"
                  :data="clerkSearchTable.dataList"
                  :height="150"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row>
                  <!-- <el-table-column fixed type="selection" width="55"></el-table-column> -->
                  <el-table-column fixed prop="cname" label="顾客姓名" align="center" width="100"></el-table-column>
                  <el-table-column fixed label="性别" align="center" width="60">
                    <template slot-scope="{ row }">
                      <div v-if="row.sex === 2">其他</div>
                      <div v-if="row.sex === 1">女</div>
                      <div v-if="row.sex === 0">男</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="信任等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.trust2 === 3">已信任</div>
                      <div v-if="row.trust2 === 2">已破冰</div>
                      <div v-if="row.trust2 === 1">未破冰</div>
                      <div v-if="row.trust2 === 0">未设置</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费能力" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.bg2 === 3">没钱</div>
                      <div v-if="row.bg2 === 2">普通</div>
                      <div v-if="row.bg2 === 1">有钱</div>
                      <div v-if="row.bg2 === 0">超有钱</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.grade === 4">S级</div>
                      <div v-if="row.grade === 3">A级</div>
                      <div v-if="row.grade === 2">B级</div>
                      <div v-if="row.grade === 1">C级</div>
                      <div v-if="row.grade === 0">未定</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="运营" align="center" width="80">
                    <template slot-scope="{ row }">
                      <span v-if="row.dengji === 3">放弃</span>
                      <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
                      <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
                      <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="kname" label="所属管家" align="center" width="160"></el-table-column>
                  <el-table-column
                    prop="sname"
                    label="所属门店"
                    align="center"
                    width="300"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column prop="solar" label="出生日期" align="center" width="160"></el-table-column>
                  <el-table-column prop="ccode" label="顾客编号" align="center" width="180"></el-table-column>
                  <el-table-column fixed="right" align="center" width="200">
                    <template slot="header">
                      <span>操作</span>
                    </template>
                    <template slot-scope="scope">
                      <div v-if="isClerkSelected(scope.row.id)">
                        <el-button type="success" size="mini" disabled plain>已选择</el-button>
                        <el-button type="danger" size="mini" plain @click.stop="goActClerkRemove(scope.row)">
                          移除
                        </el-button>
                      </div>
                      <div v-else>
                        <el-button type="primary" size="mini" plain @click.stop="goActClerkAdd(scope.row)">
                          添加
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3"><div style="width: 3px; height: 5px"></div></td>
        </tr>
        <tr>
          <td colspan="3">
            <div class="title_1_ctx1">
              <div class="title_2">
                <div class="title_icon"></div>
                <div class="title_name">已选顾客</div>
              </div>
              <div class="title_1_ctx1_1" style="width: 82vw">
                <!--顾客列表-->
                <el-table
                  ref="refClerkTable"
                  v-loading="clerkTable.dataListLoading"
                  :data="clerkTable.dataList"
                  :height="400"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row>
                  <!-- <el-table-column fixed type="selection" width="55"></el-table-column> -->
                  <el-table-column fixed prop="cname" label="顾客姓名" align="center" width="100"></el-table-column>
                  <el-table-column fixed label="性别" align="center" width="60">
                    <template slot-scope="{ row }">
                      <div v-if="row.sex === 2">其他</div>
                      <div v-if="row.sex === 1">女</div>
                      <div v-if="row.sex === 0">男</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="信任等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.trust2 === 3">已信任</div>
                      <div v-if="row.trust2 === 2">已破冰</div>
                      <div v-if="row.trust2 === 1">未破冰</div>
                      <div v-if="row.trust2 === 0">未设置</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费能力" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.bg2 === 3">没钱</div>
                      <div v-if="row.bg2 === 2">普通</div>
                      <div v-if="row.bg2 === 1">有钱</div>
                      <div v-if="row.bg2 === 0">超有钱</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="消费等级" align="center" width="80" class-name="small-padding fixed-width">
                    <template slot-scope="{ row }">
                      <div v-if="row.grade === 4">S级</div>
                      <div v-if="row.grade === 3">A级</div>
                      <div v-if="row.grade === 2">B级</div>
                      <div v-if="row.grade === 1">C级</div>
                      <div v-if="row.grade === 0">未定</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="运营" align="center" width="80">
                    <template slot-scope="{ row }">
                      <span v-if="row.dengji === 3">放弃</span>
                      <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
                      <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
                      <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                      {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="kname" label="所属管家" align="center" width="160"></el-table-column>
                  <el-table-column
                    prop="sname"
                    label="所属门店"
                    align="center"
                    width="300"
                    show-overflow-tooltip></el-table-column>
                  <el-table-column prop="solar" label="出生日期" align="center" width="160"></el-table-column>
                  <el-table-column prop="ccode" label="顾客编号" align="center" width="180"></el-table-column>
                  <el-table-column fixed="right" align="center" width="200">
                    <template slot="header">
                      <el-button type="primary" size="mini" plain @click.stop="goActClerkAddAll">本页全选</el-button>
                      <el-button type="danger" size="mini" plain @click.stop="goActClerkRemoveAll">本页全删</el-button>
                    </template>
                    <template slot-scope="scope">
                      <div v-if="isClerkSelected(scope.row.id)">
                        <el-button type="success" size="mini" disabled plain>已选择</el-button>
                        <el-button type="danger" size="mini" plain @click.stop="goActClerkRemove(scope.row)">
                          移除
                        </el-button>
                      </div>
                      <div v-else>
                        <el-button type="primary" size="mini" plain @click.stop="goActClerkAdd(scope.row)">
                          添加
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="clerkTable.total > 0"
                  :total="clerkTable.total"
                  :page.sync="clerkTable.pageParam.page"
                  :limit.sync="clerkTable.pageParam.limit"
                  @pagination="loadClerkList"></pagination>
              </div>
            </div>
          </td>
        </tr>
      </table>

      <div class="commit">
        <el-button v-if="actCreate.creating" type="primary" disabled icon="el-icon-loading">确认修改</el-button>
        <el-button v-else type="primary" @click.stop="goActModify">确认修改</el-button>
        <el-button type="info" @click.stop="handleClosePage">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import * as actApi from '@/api/activity';
import * as admApi from '@/api/admin';
import Pagination from '@/components/Pagination';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'ActivityMdf',
  components: { Pagination },
  data() {
    return {
      actDate: undefined,
      actStart: '09:00',
      actEnd: undefined,
      actType: 1,
      actFileList: [],
      actKeeper: undefined,
      actKeepers: [],
      refClerkTable: undefined,
      clerkTable: {
        // 筛选的顾客列表
        dataList: [],
        dataListLoading: false,
        total: 0,
        pageParam: { page: 1, limit: 10 },
        selectedClerks: [],
      },
      clerkSearchTable: {
        // 搜索的顾客列表
        searchName: '',
        dataList: [],
        dataListLoading: false,
      },
      actCreate: {
        // 修改活动区域
        proposalUploading: false,
        creating: false,
        showBaseInfo: true,
      },
      actVo: {
        id: null, // 活动主键ID
        sid: null, // 门店主键ID
        kid: null, // 活动负责人ID
        kname: null, // 负责人名字
        scheme: null, // 活动类型
        budget: 0.0, // 活动经费预算
        plan: null, // 简单的计划(文字描述)
        planAudio: null, // 简单的计划(语音描述)
        proposal: null, // 详细的计划(文档或者图片)
        start: null, // 活动开始时间, yyyy-MM-dd HH:mm:ss, 只选了日期的活动, 默认 9 点开始
        end: null, // 活动结束时间, yyyy-MM-dd HH:mm:ss
        score: null, // 活动结束后打分, 有打分(>0), 表示活动已完成
      },
      allSelectedTags: [], // 包含 radio 选择
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  mounted() {
    this.loadAllKeepers();
  },
  methods: {
    handleShowBaseInfo() {
      this.actCreate.showBaseInfo = !this.actCreate.showBaseInfo;
    },
    handleClosePage(val) {
      if (!val) {
        this.$emit('closed', 'click');
      } else {
        this.$emit('closed', 'list');
      }
    },
    handleFileBeforeUpload(file) {
      const allowFileTypes = ['jpg', 'jpeg', 'png', 'txt', 'pdf', 'doc', 'docx', 'xlsx', 'xls'];
      const fileType = file.name.split('.').pop().toLowerCase();
      if (allowFileTypes.indexOf(fileType) === -1) {
        MessageBox.alert('只能上传指定格式的文件!');
        return false;
      }
      return true;
    },
    handleFileUploading(event, file, fileList) {
      this.actCreate.proposalUploading = true;
    },
    handleFileUploadOk(res, file, fileList) {
      this.actCreate.proposalUploading = false;
      MessageBox.alert('文件上传完成');
    },
    handleFileUploadError(err, file, fileList) {
      this.actCreate.proposalUploading = false;
    },
    handleFileUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('id', this.openId);
      formData.append('file', file);
      await actApi
        .uploadActProposal(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert('文件上传失败: ' + res.data.message);
            } else {
              MessageBox.alert('文件上传失败!');
            }
            return;
          }
          this.actVo.proposal = res.data.data;
        })
        .catch(err => {
          MessageBox.alert('文件上传失败!');
        })
        .finally(() => {
          this.actCreate.proposalUploading = false;
        });
    },
    isClerkSelected(id) {
      let select = false;
      this.clerkTable.selectedClerks.forEach(k => {
        if (select) {
          return;
        }
        if (k.id === id) {
          select = true;
          return;
        }
      });
      return select;
    },
    goActClerkAddAll() {
      this.clerkTable.dataList.forEach(x => this.goActClerkAdd(x));
    },
    goActClerkRemoveAll() {
      this.clerkTable.dataList.forEach(x => this.goActClerkRemove(x));
    },
    goActClerkAdd(row) {
      const idx = this.clerkTable.selectedClerks.findIndex(x => x.id === row.id);
      if (idx === -1) {
        this.clerkTable.selectedClerks.push(row);
      }
    },
    goActClerkRemove(row) {
      const idx = this.clerkTable.selectedClerks.findIndex(x => x.id === row.id);
      if (idx !== -1) {
        this.clerkTable.selectedClerks.splice(idx, 1);
      }
    },
    actDisabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const oneYearLater = new Date(today);
      oneYearLater.setFullYear(today.getFullYear() + 1);
      return !(date - today >= 0 && date - oneYearLater < 0);
    },
    goActModify: async function () {
      if (this.actVo.scheme === null || this.actVo.scheme === undefined) {
        MessageBox.alert('请选择活动类型');
        return;
      }
      if (this.actKeeper === null || this.actKeeper === undefined) {
        MessageBox.alert('请选择活动负责人');
        return;
      }
      this.actVo.sid = this.openId;
      this.actVo.kid = this.actKeeper;
      const keeper = this.actKeepers.find(x => x.value === this.actVo.kid);
      if (keeper === undefined) {
        MessageBox.alert('请选择活动负责人');
        return;
      }
      this.actVo.kname = keeper.label;
      if (!this.actDate) {
        MessageBox.alert('请选择活动日期');
        return;
      }
      if (!this.actVo.plan && !this.actVo.proposal) {
        MessageBox.alert('请上传活动方案, 或者填写活动简介');
        return;
      }
      if (this.actType === 1) {
        const copyDate = new Date(this.actDate);
        copyDate.setHours(9, 0, 0, 0);
        this.actVo.start = copyDate.format('yyyy-MM-dd HH:mm:ss');
      } else {
        const now = new Date();
        const actDay = this.actDate.format('yyyy-MM-dd');
        this.actVo.start = actDay + ' ' + this.actStart + ':00';
        const dts = new Date(this.actVo.start);
        if (dts - now <= 180000) {
          MessageBox.alert('开始时间必须在 10 分钟以后');
          return;
        }
        if (this.actEnd) {
          this.actVo.end = actDay + ' ' + this.actEnd + ':00';
          const dte = new Date(this.actVo.end);
          if (dte - dts < 900000) {
            MessageBox.alert('结束时间必须在开始时间的 15 分钟以后');
            return;
          }
        }
      }
      const selectedClerkIds = this.clerkTable.selectedClerks.map(x => x.id);
      if (selectedClerkIds.length === 0) {
        MessageBox.alert('没有选择任何顾客');
        return;
      }
      this.goModifyActivity(this.actVo, selectedClerkIds);
    },
    goModifyActivity: async function (act, clerkIds) {
      this.actCreate.creating = true;
      const errAlertMsg = '修改活动失败';
      await actApi
        .activityUpdate(act)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          const actClerkVo = { id: this.actVo.id, clerkIds: clerkIds };
          actApi
            .activityAddClerks(actClerkVo)
            .then(res => {
              if (res.data.status !== apiSts.ResponseOK) {
                MessageBox.alert(errAlertMsg);
                return;
              }
              MessageBox.alert('修改活动成功');
              this.handleClosePage(1);
            })
            .catch(err => {
              MessageBox.alert(errAlertMsg);
            });
        })
        .finally(() => {
          this.actCreate.creating = false;
        });
    },
    loadAllKeepers: async function () {
      // 根据门店ID查询属于这个门店的所有用户
      // (不知道为啥有sid不用, 又新建了一个字段openId)
      await admApi
        .getSomeAdmins('', '', this.openId)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert('查询管家列表失败');
            return;
          }
          for (const k of res.data.data) {
            this.actKeepers.push({ value: k.id, label: k.username });
          }
        })
        .catch(err => {
          MessageBox.alert('查询管家列表失败');
        });
    },
    loadClerkList: async function () {
      if (this.clerkTable.dataListLoading) {
        return;
      }
      this.clerkTable.dataListLoading = true;
      await actApi
        .activityGetClerksPage(this.clerkTable.pageParam.page, this.clerkTable.pageParam.limit, this.actVo.id)
        .then(res => {
          if (res.data.data && res.data.data.records) {
            this.clerkTable.dataList = res.data.data.records;
            this.clerkTable.total = res.data.data.total;
          }
        })
        .catch(e => {
          MessageBox.alert('查询顾客列表失败');
        })
        .finally(() => {
          this.clerkTable.dataListLoading = false;
        });
    },
    loadActClerks: async function (id) {
      await actApi
        .activityGetClerks(id)
        .then(res => {
          if (res.data.data) {
            res.data.data.forEach(x => {
              this.clerkTable.selectedClerks.push({ id: x.cid });
            });
          }
        })
        .catch(e => {
          MessageBox.alert('查询参加活动的顾客列表失败');
        });
    },
    searchClerkByName: async function () {
      if (this.clerkSearchTable.dataListLoading) {
        return;
      }
      if (!this.clerkSearchTable.searchName) {
        MessageBox.alert('请输入搜索名字');
        return;
      }
      const name = this.clerkSearchTable.searchName.trim();
      if (name === '') {
        MessageBox.alert('请输入搜索名字');
        return;
      }
      this.clerkSearchTable.dataListLoading = true;
      await actApi
        .getClerksLikeName(this.openId, name)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert('搜索失败');
            return;
          }
          this.clerkSearchTable.dataList = res.data.data;
        })
        .catch(err => {
          console.log('search by name error:', err);
          MessageBox.alert('搜索失败');
        })
        .finally(() => {
          this.clerkSearchTable.dataListLoading = false;
        });
    },
    editActivity: async function (act) {
      this.actVo.id = act.id;
      this.actVo.sid = act.sid;
      this.actVo.kid = act.kid;
      this.actVo.kname = act.kname;
      this.actVo.scheme = act.scheme;
      this.actVo.budget = act.budget;
      this.actVo.plan = act.plan;
      this.actVo.planAudio = act.planAudio;
      this.actVo.proposal = act.proposal;
      this.actVo.start = act.start;
      this.actVo.end = act.end;
      this.actVo.score = act.score;
      const dts = new Date(this.actVo.start);
      this.actStart = dts.format('hh:mm');
      dts.setHours(0, 0, 0, 0);
      this.actDate = dts;
      if (this.actVo.end) {
        this.actType = 2;
        const dte = new Date(this.actVo.end);
        this.actEnd = dte.format('hh:mm');
      }
      this.actKeeper = this.actVo.kid;
      await this.loadClerkList();
      await this.loadActClerks(this.actVo.id);
    },
  },
};
</script>

<style lang="scss" scoped>
$font-family: 思源黑体 微软雅黑 Noto Sans SC-Medium;
$title-width: 100px;
$tag-height: 17px;
$tag-line-height: 17px;

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.page {
  position: relative;
  width: 100%;
  height: 1920px;
  padding: 5px 10px 0 10px;
  font-family: $font-family;
  background-color: #f8f8fa;
  border-radius: 0px 0px 0px 0px;

  .context {
    width: 100%;
    padding: 5px 10px 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .title_1 {
    font-family: $font-family;
    font-size: 20px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    color: #724eff;
    letter-spacing: 1px;
  }

  .title_1_ctx1 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    .title_1_ctx1_1 {
      display: block;
      text-align: left;

      .act_times {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .title_1_ctx1 tr {
    margin-top: 5px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .title_2 {
    width: $title-width;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;

    .title_icon {
      width: 4px;
      height: 13px;
      background: #766aff;
      background-position: left bottom;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .title_name {
      font-family: $font-family;
      font-size: 16px;
      font-weight: 550;
      line-height: 22px;
      letter-spacing: 0px;
      font-variation-settings: 'opsz' auto;
      color: #333333;
      letter-spacing: 1px;

      .no_flex {
        display: inline;
        margin-left: 15px;
      }
    }
  }
}

.tag_class {
  width: $title-width;
  font-size: 14px;
  font-weight: 550;
  line-height: 17px;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #333333;
  letter-spacing: 1px;
}

.tag_list {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.tag_item {
  margin: 0 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.tag_name {
  width: auto;
  height: $tag-height;
  line-height: $tag-line-height;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
  letter-spacing: 0px;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #666666;
}

.tag_selected {
  background: #f5f5f5;
  padding: 3px 3px 3px 3px;
}

.tag_count {
  color: #766aff;
  padding: 5px 5px 3px 5px;
  background: #ebebff;
  border-radius: 3px 3px 3px 3px;
}

.act_info td {
  width: 35%;
  vertical-align: top;
}

.commit {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
